<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图书借阅管理系统</title>
    <style>
        :root {
            --sidebar-width: 200px;
            --primary-color: #2c3e50;
        }
        
        .navbar {
            background: var(--primary-color);
            color: white;
            padding: 15px;
        }
        
        .container {
            display: flex;
            min-height: calc(100vh - 56px);
        }
        
        .sidebar {
            width: var(--sidebar-width);
            background: #f8f9fa;
            padding: 20px;
            border-right: 1px solid #ddd;
        }
        
        .content {
            flex: 1;
            padding: 20px;
        }
        
        .menu-item {
            padding: 10px;
            cursor: pointer;
            border-radius: 4px;
            margin-bottom: 5px;
        }
        
        .menu-item:hover {
            background: #e9ecef;
        }
    </style>
</head>
<style>
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    
    .btn-logout {
        background: #dc3545;
        color: white;
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .btn-logout:hover {
        background: #c82333;
    }
</style>

<body>
    <div class="navbar">
        <h2>图书借阅管理系统</h2>
        <div class="user-info">
            <span>当前用户：<span id="user">管理员</span></span>

            <button class="btn-logout" id="loginBtn">退出系统</button>
        </div>
    </div>
    
    <div class="container">
        <div class="sidebar">
            <div class="menu-item">
                <a href="/static/book_list.html" target="contentFrame">图书浏览</a>
            </div>
            <div class="menu-item">
                <a href="/static/book_add.html" target="contentFrame" id="addBookBtn">新增图书</a>
            </div>
        </div>
        
        <!-- 将原有内容区域替换为iframe -->
        <iframe 
            name="contentFrame" 
            class="content" 
            src="/static/book_list.html"
            frameborder="0"
        ></iframe>
        
        <style>
            /* 新增iframe样式 */
            .content {
                width: 100%;
                height: calc(100vh - 76px);
            }
            
            /* 调整菜单项链接样式 */
            .menu-item a {
                display: block;
                color: inherit;
                text-decoration: none;
            }
            
            /* 保持原有悬停效果 */
            .menu-item:hover {
                background: #e9ecef;
            }
        </style>
    </div>

<script src="/static/myajax.js"></script>
<script>
    let token = sessionStorage.getItem('token');
    const user = document.getElementById('user')
    const loginBtn = document.getElementById('loginBtn')
    loginBtn.addEventListener('click', function (){
        sessionStorage.clear()
        location.href = '/static/login.html';
    })

    if (token) {
       user.innerText = sessionStorage.getItem('realname')
       loginBtn.innerText = '退出系统'

        //设置定时器，在token快过期时候，更新token
        //本项目设置的token过期时间是1天，在差5分的时候，更新token
        const timerId = setInterval(() => {
            ajaxRequest( {
                method: 'POST',
                url:"/updateToken",
                data: {
                    token
                }
            }).then(data => {
                if(data.status == 0) {
                    sessionStorage.setItem('token', data.token);
                    token = data.token
                    //console.log("更新token成功" + data.token)
                }else{
                    alert(data.status + '：' + data.msg)
                }
            }).catch(error => alert('Error:'+ error.msg));

        }, 1000*60*60*24 - 5);

    }else{
        user.innerText = "游客"
        loginBtn.innerText = '登录'
    }


    document.getElementById('addBookBtn').addEventListener('click', function(e) {
        e.preventDefault()
        
        //判断是否登录
        if (token) {
            // 获取iframe元素并修改其src
            const iframe = document.querySelector('iframe[name="contentFrame"]');
            iframe.src = '/static/book_add.html';
        }else{
            if (confirm('还未登录，是否确定要去登录页面？')){
                location.href = '/static/login.html';
            }else{
                return false
            }
        }
    });
</script>
</body>
</html>